<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="zxx" xmlns:th="http://www.thymeleaf.org">

<!--<![endif]-->
<!-- Begin Head -->

<head th:replace="/admin/common/CSSandJS :: head('管理系统')"></head>


<body>
<div class="loader">
    <div class="spinner">
        <img src="/admin/picture/loader.gif" alt="">
    </div>
</div>
<!-- Main Body -->
<div class="page-wrapper">
    <!-- Header Start -->
    <div th:replace="/admin/common/header :: header"/>
    <!-- Sidebar Start -->
    <div th:replace="/admin/common/aside :: aside"/>
    <!-- Container Start -->
    <div class="page-wrapper">
        <div class="main-content">
            <!-- Page Title Start -->
            <div class="row">
                <div class="colxl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                    <div class="page-title-wrapper">
                        <div class="page-title-box ad-title-box-use">
                            <h4 class="page-title">Users</h4>
                        </div>
                        <div class="ad-breadcrumb">
                            <ul>
                                <li>
                                    <div class="ad-user-btn">
                                        <input class="form-control" type="text" placeholder="Search Here..." id="text-input">
                                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 56.966 56.966">
                                            <path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23
												s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92
												c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17
												s-17-7.626-17-17S14.61,6,23.984,6z"></path>
                                        </svg>
                                    </div>
                                </li>
                                <li>
                                    <div class="add-group">
                                        <a class="ad-btn">Add User</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Table Start -->
            <div class="row">
                <!-- Styled Table Card-->
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                    <div class="card table-card">
                        <div class="card-header pb-0">
                            <h4>User List</h4>
                        </div>
                        <div class="card-body">
                            <div class="chart-holder">
                                <div class="table-responsive">
                                    <table class="table table-styled mb-0">
                                        <thead>
                                        <tr>
                                            <th>id</th>
                                            <th>username</th>
                                            <th>Password</th>
                                            <th>Create Time</th>
                                            <th>Operate</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr th:each="admin:${adminList.list}">
                                            <td>[[${admin.id}]]</td>
                                            <td>
<!--                                                        <span class="img-thumb">-->
<!--                                                            <img th:src="@{${admin.image}}" alt="">-->
                                                            <span class="ml-2">[[${admin.username}]]</span>
                                                        </span>
                                            </td>
                                            <!--                                                    <td>-->
                                            <!--&lt;!&ndash;                                                        <div class="progress">&ndash;&gt;-->
                                            <!--&lt;!&ndash;                                                            <div class="progress-bar bg-primary col-3" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>&ndash;&gt;-->
                                            <!--&lt;!&ndash;                                                        </div>&ndash;&gt;-->
                                            <!--                                                        <span class="num" th:value="${user.username}"></span>-->
                                            <!--                                                    </td>-->
                                            <td>[[${admin.password}]]</td>
                                            <!--                                                    <td>-->
                                            <!--                                                        <label class="mb-0 badge badge-primary" title="Pending">Pending</label>-->
                                            <!--                                                    </td>-->
                                            <td>[[${admin.createTime}]]</td>
                                            <td class="relative">
                                                <a class="action-btn " href="javascript:void(0); ">
                                                    <svg class="default-size " viewbox="0 0 341.333 341.333 ">
                                                        <g>
                                                            <g>
                                                                <g>
                                                                    <path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>
                                                                    <path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>
                                                                    <path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </svg>
                                                </a>
                                                <div class="action-option ">
                                                    <ul>
                                                        <li>
                                                            <a href="javascript:void(0); "><i class="far fa-edit mr-2 "></i>Edit</a>
                                                        </li>
                                                        <li>
                                                            <a href="javascript:void(0); "><i class="far fa-trash-alt mr-2 "></i>Delete</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                        <!--                                                <tr>-->
                                        <!--                                                    <td>2</td>-->
                                        <!--                                                    <td>-->
                                        <!--                                                        <span class="img-thumb">-->
                                        <!--                                                            <img src="/admin/picture/2.jpg" alt=" ">-->
                                        <!--                                                            <span class="ml-2 ">Emily Arnold</span>-->
                                        <!--                                                        </span>-->
                                        <!--                                                    </td>-->
                                        <!--                                                    <td>-->
                                        <!--                                                        <div class="progress">-->
                                        <!--                                                            <div class="progress-bar bg-secondary col-2" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>-->
                                        <!--                                                        </div>-->
                                        <!--                                                    </td>-->
                                        <!--                                                    <td>02/07/2021</td>-->
                                        <!--                                                    <td>-->
                                        <!--                                                        <label class="mb-0 badge badge-success " title="Pending">Success</label>-->
                                        <!--                                                    </td>-->
                                        <!--                                                    <td class="relative">-->
                                        <!--                                                        <a class="action-btn" href="javascript:void(0);">-->
                                        <!--                                                            <svg class="default-size " viewbox="0 0 341.333 341.333 ">-->
                                        <!--                                                                <g>-->
                                        <!--                                                                    <g>-->
                                        <!--                                                                        <g>-->
                                        <!--                                                                            <path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>-->
                                        <!--                                                                            <path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>-->
                                        <!--                                                                            <path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>-->
                                        <!--                                                                        </g>-->
                                        <!--                                                                    </g>-->
                                        <!--                                                                </g>-->
                                        <!--                                                            </svg>-->
                                        <!--                                                        </a>-->
                                        <!--                                                        <div class="action-option">-->
                                        <!--                                                            <ul>-->
                                        <!--                                                                <li>-->
                                        <!--                                                                    <a href="javascript:void(0);"><i class="far fa-edit mr-2"></i>Edit</a>-->
                                        <!--                                                                </li>-->
                                        <!--                                                                <li>-->
                                        <!--                                                                    <a href="javascript:void(0);"><i class="far fa-trash-alt mr-2"></i>Delete</a>-->
                                        <!--                                                                </li>-->
                                        <!--                                                            </ul>-->
                                        <!--                                                        </div>-->
                                        <!--                                                    </td>-->
                                        <!--                                                </tr>-->
                                        <!--                                                <tr>-->
                                        <!--                                                    <td>3</td>-->
                                        <!--                                                    <td>-->
                                        <!--                                                        <span class="img-thumb">-->
                                        <!--                                                            <img src="/admin/picture/3.jpg" alt="">-->
                                        <!--                                                            <span class="ml-2">Amanda Gray</span>-->
                                        <!--                                                        </span>-->
                                        <!--                                                    </td>-->
                                        <!--                                                    <td>-->
                                        <!--                                                        <div class="progress">-->
                                        <!--                                                            <div class="progress-bar bg-info col-6" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>-->
                                        <!--                                                        </div>-->
                                        <!--                                                    </td>-->
                                        <!--                                                    <td>22/06/2021</td>-->
                                        <!--                                                    <td>-->
                                        <!--                                                        <label class="mb-0 badge badge-info" title="Pending">Checking</label>-->
                                        <!--                                                    </td>-->
                                        <!--                                                    <td class="relative">-->
                                        <!--                                                        <a class="action-btn" href="javascript:void(0);">-->
                                        <!--                                                            <svg class="default-size " viewbox="0 0 341.333 341.333 ">-->
                                        <!--                                                                <g>-->
                                        <!--                                                                    <g>-->
                                        <!--                                                                        <g>-->
                                        <!--                                                                            <path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>-->
                                        <!--                                                                            <path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>-->
                                        <!--                                                                            <path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>-->
                                        <!--                                                                        </g>-->
                                        <!--                                                                    </g>-->
                                        <!--                                                                </g>-->
                                        <!--                                                            </svg>-->
                                        <!--                                                        </a>-->
                                        <!--                                                        <div class="action-option">-->
                                        <!--                                                            <ul>-->
                                        <!--                                                                <li>-->
                                        <!--                                                                    <a href="javascript:void(0);"><i class="far fa-edit mr-2"></i>Edit</a>-->
                                        <!--                                                                </li>-->
                                        <!--                                                                <li>-->
                                        <!--                                                                    <a href="javascript:void(0);"><i class="far fa-trash-alt mr-2"></i>Delete</a>-->
                                        <!--                                                                </li>-->
                                        <!--                                                            </ul>-->
                                        <!--                                                        </div>-->
                                        <!--                                                    </td>-->
                                        <!--                                                </tr>-->
                                        <!--                                                <tr>-->
                                        <!--                                                    <td>4</td>-->
                                        <!--                                                    <td>-->
                                        <!--                                                        <span class="img-thumb">-->
                                        <!--                                                            <img src="/admin/picture/7.jpg" alt="">-->
                                        <!--                                                            <span class="ml-2">John</span>-->
                                        <!--                                                        </span>-->
                                        <!--                                                    </td>-->
                                        <!--                                                    <td>-->
                                        <!--                                                        <div class="progress">-->
                                        <!--                                                            <div class="progress-bar bg-success col-8" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>-->
                                        <!--                                                        </div>-->
                                        <!--                                                    </td>-->
                                        <!--                                                    <td>14/08/2021</td>-->
                                        <!--                                                    <td>-->
                                        <!--                                                        <label class="mb-0 badge badge-success" title="Pending">Success</label>-->
                                        <!--                                                    </td>-->
                                        <!--                                                    <td class="relative">-->
                                        <!--                                                        <a class="action-btn" href="javascript:void(0);">-->
                                        <!--                                                            <svg class="default-size " viewbox="0 0 341.333 341.333 ">-->
                                        <!--                                                                <g>-->
                                        <!--                                                                    <g>-->
                                        <!--                                                                        <g>-->
                                        <!--                                                                            <path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>-->
                                        <!--                                                                            <path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>-->
                                        <!--                                                                            <path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>-->
                                        <!--                                                                        </g>-->
                                        <!--                                                                    </g>-->
                                        <!--                                                                </g>-->
                                        <!--                                                            </svg>-->
                                        <!--                                                        </a>-->
                                        <!--                                                        <div class="action-option">-->
                                        <!--                                                            <ul>-->
                                        <!--                                                                <li>-->
                                        <!--                                                                    <a href="javascript:void(0);"><i class="far fa-edit mr-2"></i>Edit</a>-->
                                        <!--                                                                </li>-->
                                        <!--                                                                <li>-->
                                        <!--                                                                    <a href="javascript:void(0);"><i class="far fa-trash-alt mr-2"></i>Delete</a>-->
                                        <!--                                                                </li>-->
                                        <!--                                                            </ul>-->
                                        <!--                                                        </div>-->
                                        <!--                                                    </td>-->
                                        <!--                                                </tr>-->
                                        <!--                                                <tr>-->
                                        <!--                                                    <td>4</td>-->
                                        <!--                                                    <td>-->
                                        <!--                                                        <span class="img-thumb">-->
                                        <!--                                                            <img src="/admin/picture/4.jpg" alt="">-->
                                        <!--                                                            <span class="ml-2">Sean Wilson</span>-->
                                        <!--                                                        </span>-->
                                        <!--                                                    </td>-->
                                        <!--                                                    <td>-->
                                        <!--                                                        <div class="progress">-->
                                        <!--                                                            <div class="progress-bar bg-warning col-5" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>-->
                                        <!--                                                        </div>-->
                                        <!--                                                    </td>-->
                                        <!--                                                    <td>11/12/2021</td>-->
                                        <!--                                                    <td>-->
                                        <!--                                                        <label class="mb-0 badge badge-danger" title="Pending">Cancel</label>-->
                                        <!--                                                    </td>-->
                                        <!--                                                    <td class="relative">-->
                                        <!--                                                        <a class="action-btn" href="javascript:void(0);">-->
                                        <!--                                                            <svg class="default-size " viewbox="0 0 341.333 341.333 ">-->
                                        <!--                                                                <g>-->
                                        <!--                                                                    <g>-->
                                        <!--                                                                        <g>-->
                                        <!--                                                                            <path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>-->
                                        <!--                                                                            <path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>-->
                                        <!--                                                                            <path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>-->
                                        <!--                                                                        </g>-->
                                        <!--                                                                    </g>-->
                                        <!--                                                                </g>-->
                                        <!--                                                            </svg>-->
                                        <!--                                                        </a>-->
                                        <!--                                                        <div class="action-option">-->
                                        <!--                                                            <ul>-->
                                        <!--                                                                <li>-->
                                        <!--                                                                    <a href="javascript:void(0);"><i class="far fa-edit mr-2"></i>Edit</a>-->
                                        <!--                                                                </li>-->
                                        <!--                                                                <li>-->
                                        <!--                                                                    <a href="javascript:void(0);"><i class="far fa-trash-alt mr-2"></i>Delete</a>-->
                                        <!--                                                                </li>-->
                                        <!--                                                            </ul>-->
                                        <!--                                                        </div>-->
                                        <!--                                                    </td>-->
                                        <!--                                                </tr>-->
                                        <!--                                                <tr>-->
                                        <!--                                                    <td>5</td>-->
                                        <!--                                                    <td>-->
                                        <!--                                                        <span class="img-thumb">-->
                                        <!--                                                            <img src="/admin/picture/1.jpg" alt="">-->
                                        <!--                                                            <span class="ml-2">Claire Langdon</span>-->
                                        <!--                                                        </span>-->
                                        <!--                                                    </td>-->
                                        <!--                                                    <td>-->
                                        <!--                                                        <div class="progress">-->
                                        <!--                                                            <div class="progress-bar bg-dark col-9" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>-->
                                        <!--                                                        </div>-->
                                        <!--                                                    </td>-->
                                        <!--                                                    <td>24/09/2021</td>-->
                                        <!--                                                    <td>-->
                                        <!--                                                        <label class="mb-0 badge badge-warning" title="Pending">Pending</label>-->
                                        <!--                                                    </td>-->
                                        <!--                                                    <td class="relative">-->
                                        <!--                                                        <a class="action-btn" href="javascript:void(0);">-->
                                        <!--                                                            <svg class="default-size " viewbox="0 0 341.333 341.333 ">-->
                                        <!--                                                                <g>-->
                                        <!--                                                                    <g>-->
                                        <!--                                                                        <g>-->
                                        <!--                                                                            <path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>-->
                                        <!--                                                                            <path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>-->
                                        <!--                                                                            <path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>-->
                                        <!--                                                                        </g>-->
                                        <!--                                                                    </g>-->
                                        <!--                                                                </g>-->
                                        <!--                                                            </svg>-->
                                        <!--                                                        </a>-->
                                        <!--                                                        <div class="action-option">-->
                                        <!--                                                            <ul>-->
                                        <!--                                                                <li>-->
                                        <!--                                                                    <a href="javascript:void(0);"><i class="far fa-edit mr-2"></i>Edit</a>-->
                                        <!--                                                                </li>-->
                                        <!--                                                                <li>-->
                                        <!--                                                                    <a href="javascript:void(0);"><i class="far fa-trash-alt mr-2"></i>Delete</a>-->
                                        <!--                                                                </li>-->
                                        <!--                                                            </ul>-->
                                        <!--                                                        </div>-->
                                        <!--                                                    </td>-->
                                        <!--                                                </tr>-->
                                        <!--                                                <tr>-->
                                        <!--                                                    <td>6</td>-->
                                        <!--                                                    <td>-->
                                        <!--                                                        <span class="img-thumb">-->
                                        <!--                                                            <img src="/admin/picture/7.jpg" alt="">-->
                                        <!--                                                            <span class="ml-2">Owen Glover</span>-->
                                        <!--                                                        </span>-->
                                        <!--                                                    </td>-->
                                        <!--                                                    <td>-->
                                        <!--                                                        <div class="progress">-->
                                        <!--                                                            <div class="progress-bar bg-warning col-10" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>-->
                                        <!--                                                        </div>-->
                                        <!--                                                    </td>-->
                                        <!--                                                    <td>15/07/2021</td>-->
                                        <!--                                                    <td>-->
                                        <!--                                                        <label class="mb-0 badge badge-secondary" title="Pending">Pending</label>-->
                                        <!--                                                    </td>-->
                                        <!--                                                    <td class="relative">-->
                                        <!--                                                        <a class="action-btn" href="javascript:void(0);">-->
                                        <!--                                                            <svg class="default-size " viewbox="0 0 341.333 341.333 ">-->
                                        <!--                                                                <g>-->
                                        <!--                                                                    <g>-->
                                        <!--                                                                        <g>-->
                                        <!--                                                                            <path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>-->
                                        <!--                                                                            <path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>-->
                                        <!--                                                                            <path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>-->
                                        <!--                                                                        </g>-->
                                        <!--                                                                    </g>-->
                                        <!--                                                                </g>-->
                                        <!--                                                            </svg>-->
                                        <!--                                                        </a>-->
                                        <!--                                                        <div class="action-option">-->
                                        <!--                                                            <ul>-->
                                        <!--                                                                <li>-->
                                        <!--                                                                    <a href="javascript:void(0);"><i class="far fa-edit mr-2"></i>Edit</a>-->
                                        <!--                                                                </li>-->
                                        <!--                                                                <li>-->
                                        <!--                                                                    <a href="javascript:void(0);"><i class="far fa-trash-alt mr-2"></i>Delete</a>-->
                                        <!--                                                                </li>-->
                                        <!--                                                            </ul>-->
                                        <!--                                                        </div>-->
                                        <!--                                                    </td>-->
                                        <!--                                                </tr>-->
                                        <!--                                                <tr>-->
                                        <!--                                                    <td>7</td>-->
                                        <!--                                                    <td>-->
                                        <!--                                                        <span class="img-thumb">-->
                                        <!--                                                            <img src="/admin/picture/1.jpg" alt="">-->
                                        <!--                                                            <span class="ml-2">Ava Sutherland</span>-->
                                        <!--                                                        </span>-->
                                        <!--                                                    </td>-->
                                        <!--                                                    <td>-->
                                        <!--                                                        <div class="progress">-->
                                        <!--                                                            <div class="progress-bar bg-secondary col-3" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>-->
                                        <!--                                                        </div>-->
                                        <!--                                                    </td>-->
                                        <!--                                                    <td>20/08/2021</td>-->
                                        <!--                                                    <td>-->
                                        <!--                                                        <label class="mb-0 badge badge-success" title="Pending">Success</label>-->
                                        <!--                                                    </td>-->
                                        <!--                                                    <td class="relative">-->
                                        <!--                                                        <a class="action-btn" href="javascript:void(0);">-->
                                        <!--                                                            <svg class="default-size " viewbox="0 0 341.333 341.333 ">-->
                                        <!--                                                                <g>-->
                                        <!--                                                                    <g>-->
                                        <!--                                                                        <g>-->
                                        <!--                                                                            <path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>-->
                                        <!--                                                                            <path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>-->
                                        <!--                                                                            <path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>-->
                                        <!--                                                                        </g>-->
                                        <!--                                                                    </g>-->
                                        <!--                                                                </g>-->
                                        <!--                                                            </svg>-->
                                        <!--                                                        </a>-->
                                        <!--                                                        <div class="action-option">-->
                                        <!--                                                            <ul>-->
                                        <!--                                                                <li>-->
                                        <!--                                                                    <a href="javascript:void(0);"><i class="far fa-edit mr-2"></i>Edit</a>-->
                                        <!--                                                                </li>-->
                                        <!--                                                                <li>-->
                                        <!--                                                                    <a href="javascript:void(0);"><i class="far fa-trash-alt mr-2"></i>Delete</a>-->
                                        <!--                                                                </li>-->
                                        <!--                                                            </ul>-->
                                        <!--                                                        </div>-->
                                        <!--                                                    </td>-->
                                        <!--                                                </tr>-->
                                        <!--                                                <tr>-->
                                        <!--                                                    <td>8</td>-->
                                        <!--                                                    <td>-->
                                        <!--                                                        <span class="img-thumb">-->
                                        <!--                                                            <img src="/admin/picture/2.jpg" alt="">-->
                                        <!--                                                            <span class="ml-2">Amanda Gray</span>-->
                                        <!--                                                        </span>-->
                                        <!--                                                    </td>-->
                                        <!--                                                    <td>-->
                                        <!--                                                        <div class="progress">-->
                                        <!--                                                            <div class="progress-bar bg-success col-1" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>-->
                                        <!--                                                        </div>-->
                                        <!--                                                    </td>-->
                                        <!--                                                    <td>22/06/2021</td>-->
                                        <!--                                                    <td>-->
                                        <!--                                                        <label class="mb-0 badge badge-danger" title="Pending">Cancel</label>-->
                                        <!--                                                    </td>-->
                                        <!--                                                    <td class="relative">-->
                                        <!--                                                        <a class="action-btn" href="javascript:void(0);">-->
                                        <!--                                                            <svg class="default-size " viewbox="0 0 341.333 341.333 ">-->
                                        <!--                                                                <g>-->
                                        <!--                                                                    <g>-->
                                        <!--                                                                        <g>-->
                                        <!--                                                                            <path d="M170.667,85.333c23.573,0,42.667-19.093,42.667-42.667C213.333,19.093,194.24,0,170.667,0S128,19.093,128,42.667 C128,66.24,147.093,85.333,170.667,85.333z "></path>-->
                                        <!--                                                                            <path d="M170.667,128C147.093,128,128,147.093,128,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S194.24,128,170.667,128z "></path>-->
                                        <!--                                                                            <path d="M170.667,256C147.093,256,128,275.093,128,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C213.333,275.093,194.24,256,170.667,256z "></path>-->
                                        <!--                                                                        </g>-->
                                        <!--                                                                    </g>-->
                                        <!--                                                                </g>-->
                                        <!--                                                            </svg>-->
                                        <!--                                                        </a>-->
                                        <!--                                                        <div class="action-option">-->
                                        <!--                                                            <ul>-->
                                        <!--                                                                <li>-->
                                        <!--                                                                    <a href="javascript:void(0);"><i class="far fa-edit mr-2"></i>Edit</a>-->
                                        <!--                                                                </li>-->
                                        <!--                                                                <li>-->
                                        <!--                                                                    <a href="javascript:void(0);"><i class="far fa-trash-alt mr-2"></i>Delete</a>-->
                                        <!--                                                                </li>-->
                                        <!--                                                            </ul>-->
                                        <!--                                                        </div>-->
                                        <!--                                                    </td>-->
                                        <!--                                                </tr>-->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="text-right">
                                <nav class="d-inline-block">
                                    <ul class="pagination mb-0 ">
                                        <li class="page-item disabled ">
                                            <a class="page-link" href="javascript:void(0);" tabindex="-1"><i class="fas fa-chevron-left"></i></a>
                                        </li>
                                        <li class="page-item active "><a class="page-link " href="javascript:void(0); ">1</a></li>
                                        <li class="page-item ">
                                            <a class="page-link " href="javascript:void(0); ">2</a>
                                        </li>
                                        <li class="page-item "><a class="page-link " href="javascript:void(0); ">3</a></li>
                                        <li class="page-item ">
                                            <a class="page-link " href="javascript:void(0); "><i class="fas fa-chevron-right "></i></a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Slide Setting Box -->
<div class="slide-setting-box">
    <div class="slide-setting-holder">
        <div class="setting-box-head">
            <h4>General Settings</h4>
            <a href="javascript:void(0);" class="close-btn">Close</a>
        </div>
        <div class="setting-box-body">
            <div class="p-4">
                <div class="switch-settings">
                    <div class="d-flex mb-3">
                        <span class="mr-auto fs-15">Notifications</span>
                        <div class="checkbox checkbox-toggle">
                            <input id="checkbox55" type="checkbox">
                            <label for="checkbox55"></label>
                        </div>
                    </div>
                    <div class="d-flex mb-3">
                        <span class="mr-auto fs-15">Show your emails</span>
                        <div class="checkbox checkbox-toggle">
                            <input id="checkbox56" type="checkbox">
                            <label for="checkbox56"></label>
                        </div>
                    </div>
                    <div class="d-flex mb-3">
                        <span class="mr-auto fs-15">Show Task statistics</span>
                        <div class="checkbox checkbox-toggle">
                            <input id="checkbox57" type="checkbox">
                            <label for="checkbox57"></label>
                        </div>
                    </div>
                    <div class="d-flex mb-3">
                        <span class="mr-auto fs-15">Show recent activity</span>
                        <div class="checkbox checkbox-toggle">
                            <input id="checkbox58" type="checkbox">
                            <label for="checkbox58"></label>
                        </div>
                    </div>
                    <div class="d-flex mb-3">
                        <span class="mr-auto fs-15">System Logs</span>
                        <div class="checkbox checkbox-toggle">
                            <input id="checkbox59" type="checkbox">
                            <label for="checkbox59"></label>
                        </div>
                    </div>
                    <div class="d-flex mb-3">
                        <span class="mr-auto fs-15">Error Reporting</span>
                        <div class="checkbox checkbox-toggle">
                            <input id="checkbox60" type="checkbox">
                            <label for="checkbox60"></label>
                        </div>
                    </div>
                    <div class="d-flex mb-3">
                        <span class="mr-auto fs-15">Show your status to all</span>
                        <div class="checkbox checkbox-toggle">
                            <input id="checkbox61" type="checkbox">
                            <label for="checkbox61"></label>
                        </div>
                    </div>
                    <div class="d-flex">
                        <span class="mr-auto fs-15">Keep up to date</span>
                        <div class="checkbox checkbox-toggle">
                            <input id="checkbox62" type="checkbox">
                            <label for="checkbox62"></label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="p-3 border-top border-bottom">
            <h5 class="border-bottom-0 mb-0">Overview</h5>
        </div>
        <div class="p-4">
            <div class="progress-wrapper">
                <div class="mb-3">
                    <p class="mb-2">Achieves<span class="float-right text-muted font-weight-normal">95%</span></p>
                    <div class="progress h-1">
                        <div class="progress-bar bg-primary col-3" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
            <div class="progress-wrapper pt-2">
                <div class="mb-3">
                    <p class="mb-2">Projects<span class="float-right text-muted font-weight-normal">65%</span></p>
                    <div class="progress">
                        <div class="progress-bar bg-secondary col-3" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
            <div class="progress-wrapper pt-2">
                <div class="mb-3">
                    <p class="mb-2">Earnings<span class="float-right text-muted font-weight-normal">55%</span></p>
                    <div class="progress">
                        <div class="progress-bar bg-success col-8" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
            <div class="progress-wrapper pt-2">
                <div class="mb-3">
                    <p class="mb-2">Balance<span class="float-right text-muted font-weight-normal">50%</span></p>
                    <div class="progress h-1">
                        <div class="progress-bar bg-warning w-50 " role="progressbar"></div>
                    </div>
                </div>
            </div>
            <div class="progress-wrapper pt-2">
                <div class="mb-3">
                    <p class="mb-2">Total Profits<span class="float-right text-muted font-weight-normal">80%</span></p>
                    <div class="progress">
                        <div class="progress-bar bg-info col-6" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
            <div class="progress-wrapper pt-2">
                <div class="mb-3">
                    <p class="mb-2">Total Likes<span class="float-right text-muted font-weight-normal">75%</span></p>
                    <div class="progress h-1">
                        <div class="progress-bar bg-teal w-75" role="progressbar"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Color Setting -->
<div id="style-switcher">
    <div>
        <ul class="colors">
            <li>
                <p class='colorchange' id='color'>
                </p>
            </li>
            <li>
                <p class='colorchange' id='color2'>
                </p>
            </li>
            <li>
                <p class='colorchange' id='color3'>
                </p>
            </li>
            <li>
                <p class='colorchange' id='color4'>
                </p>
            </li>
            <li>
                <p class='colorchange' id='color5'>
                </p>
            </li>
            <li>
                <p class='colorchange' id='style'>
                </p>
            </li>
        </ul>
    </div>
    <div class="bottom">
        <a href="" class="settings">
            <i class="fa fa-cog" aria-hidden="true"></i>
        </a>
    </div>
</div>
<!-- Color Setting -->
<!-- Script Start -->
<script src="/admin/js/jquery.min.js"></script>
<script src="/admin/js/popper.min.js"></script>
<script src="/admin/js/bootstrap.min.js"></script>
<script src="/admin/js/custom.js"></script>
<script th:src="@{/common/jquery.js}"></script>
</body>
<script >
    // $(document).ready(function (){
    //     $.ajax({
    //         url:"/admin/user",
    //         type:"GET",
    //         data:$("#").serializable
    //     })
    // })
</script>
</html>